
import { ref, watchEffect, reactive, computed, watch } from 'vue'
import *  as util from '@/amtf/utils'
import 提示 from '@/amtf/hooks/提示';
import useApi from '@/amtf/api/增查api';

export default function (cfg = {}) {
  console.log(`设置 ing👇`)
  const api = useApi(cfg.url);
  const a = reactive({
    弹窗否: false,
    变化了: false,
  })
  const 单项组 = reactive([])
  const 单项 = reactive({})

  let 监听变化 = true

  async function 初始化() {
    a.变化了 = false
    监听变化 = false
    const res = await api.查()
    // console.log(`res 👉`,res)
    if (res.code === 0) {
      util.数组重予(单项组, res.data.list)
      // res.data.list.forEach(item => {
      //     单项组[item.名称] = item
      // });
    }
    // 监听变化 = true
  }
  初始化()

  const 单项模板 = {
    名称: "",
    内容: []
  }
  if (cfg.单项模板) {
    Object.assign(单项模板, cfg.单项模板)
  }

  function 增() {
    a.弹窗否 = true
    util.对象重予(单项, 单项模板)
  }

  function 增提交() {
    console.log(`单项 👉`, 单项)
    单项组.push(util.深拷贝(单项))
    a.弹窗否 = false
  }

  async function 删(单项) {
    util.删除元素(单项组, 单项)
    let id = 单项.id
    if (id) {
      let res
      res = await api.删({id})
      if (res.code === 0) {
        初始化()
      }
    }
  }

  const 单项树 = computed(() => {
    const 树 = {}
    单项组.forEach(el => {
      const 内容组 = el.内容
      let arr = 内容组.map(内容 => {
        // console.log("item", item);
        return { label: 内容, value: 内容 }
      })
      树[el.名称] = arr
    });
    // console.log(`树 👉`,树)
    return 树
  })

  const 提交 = async () => {
    let res
    res = await api.改(单项组)
    if (res.code === 0) {
      提示()
      初始化()
    }
  }

  watch(单项组, (newValue, oldValue) => {
    console.log(`设置变化 ing👇`)
    console.log(`监听变化 👉`, 监听变化)
    if (监听变化) {
      a.变化了 = true
    }
    监听变化 = true
    // 成单项树()
  })

  return { 单项, 单项组, a, 初始化, 提交, 单项树, 增, 增提交, 删 }
}